<template>
    <van-list v-model="loading" :finished="finished" v-on:scroll.passive="onLoad">
        <van-cell v-for="item in list" :key="item" :title="item + ''" />
    </van-list>
</template>

<script>
    import Vue from 'vue'
    import {
        List,
        Cell
    } from 'vant'
    import {
        Toast
    } from 'vant';

    export default {
        components: {
            [List.name]: List,
            [Cell.name]: Cell
        },
        i18n: {
            'zh-CN': {
                text: '当即将滚动到元素底部时，会自动加载更多'
            },
            'en-US': {
                text: 'This list will load items will scroll to bottom.'
            }
        },

        created() {
            Toast.loading({
                mask: true,
                message: '加载中...'
            });
        },

        data() {
            return {
                list: [],
                refreshing: false,
                loading: false,
                finished: false
            };
        },

        methods: {
            onLoad() {
                setTimeout(() => {
                    for (let i = 0; i < 10; i++) {
                        const text = this.list.length + 1;
                        this.list.push(text < 10 ? '0' + text : text);
                    }
                    this.loading = false;

                    if (this.list.length >= 40) {
                        this.finished = true;
                    }
                }, 500);
            },

            onRefresh() {
                setTimeout(() => {
                    this.list = [];
                    this.finished = false;
                    this.refreshing = false;
                    window.scrollTo(0, 10);
                }, 1000);
            }
        }
    };

</script>

<style lang="postcss">
    .demo-list {
        .van-cell {
            text-align: center;
        }

        .page-desc {
            padding: 5px 0;
            line-height: 1.4;
            font-size: 14px;
            text-align: center;
            color: #666;
        }
    }

</style>
